import Vue from 'vue'
import VueRouter from 'vue-router'

// 调用 Vue.use()函数，把VueRouter安装为 Vue的插件
Vue.use(VueRouter)
// 解决路由报错沉余导航问题  也就是说一直点击一个路由会报错，这里把它解决报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err)
}
// 创建路由的实例对象
const router = new VueRouter({
  routes: [
    // 路由重定向 强制指定跳转到某一个页面
    { name: 'login', path: '/', redirect: '/login' },
    // 路由规则
    {
      name: 'login',
      path: '/login',
      component: () => import('../pages/login/login.vue'),
      // v-show="$route.meta.requiresAuth"  具体用法
      meta: { requiresAuth: true }
    },
    {
      name: 'home',
      path: '/home/:keyword?',
      component: () => import('../pages/home/home.vue'),
      // 将登录用户的 用户名传给首页
      props: ($route) => {
        return {
          username: $route.params.keyword
          // b: $route.query.a
        }
      }
    },
    {
      name: 'cs',
      path: '/cs',
      component: () => import('../components/cs.vue')
    }
  ]
})

// 导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路由的信息对象
  // from 将要离开的路由的信息对象
  // next 是一个函数，调用 next() 表示放行 允许这次路由导航 不调next()哪个路由都访问不了
  // console.log(to)
  // next()
  // next()  当前用户用有访问权限，直接方行
  // next('login')  当前用户没有访问权限，强制跳转到登录页面
  // next(false)  当前用户没有访问权限，停留在指定页面，不能发生跳转
  // 3.如果访问的地址是 /main 则需要 localStorage中的 token 值
  // 3.1如果有 token，放行
  // 3.2没有 token，则强制跳转到 /login登录页面

  const pathArr = ['/home', '/user', '/xiangQing']
  // if (pathArr.indexOf(to.path) !== -1)) 数组方法 不等于 就是在数组中存在
  if (pathArr.indexOf(to.path) !== -1) {
    // if (to.path === '/index') {
    const token = localStorage.getItem('token') // 返回true 或false
    if (token) {
      next() // 访问主页，且有 token 的值
    } else {
      next('/login') // 访问主页，没有 token 的值，跳转到登录页面
    }
  } else {
    next() // 访问的不是主页，直接放行
  }
})

// 4.向外共享路由的实例对象

export default router
